function qs(ele) {
    return document.querySelector(ele)
}

// 接口地址：https://www.apifox.cn/apidoc/shared-36f0cbc0-9064-44bc-850a-805e263bf494/api-25827426
let sheng = '<option value="">请选择省份</option>'
axios.defaults.baseURL = 'http://124.223.14.236:3001/api'
// axios.get('/city/province').then(({ data }) => {
//     console.log(data);
//     data.data.forEach(item => {
//         const { name, province } = item
//         sheng += `<option value="${province}">${name}</option>`
//     });
//     qs('#province').innerHTML = sheng
//     qs('#province').addEventListener('click', function () {
//         console.log(this.value);

//     })

// })
async function fn() {
    const { data: { data: province } } = await axios.get('/city/province')
    const str = province.map(item => `<option value="${item.province}">${item.name}</option>`).join('')
    qs('#province').innerHTML = '<option value="">请选择省份</option>' + str
    qs('#province').value = '34'
    const { data: { data: city } } = await axios.get('/city/city', {
        params: {
            provinceCode: '34'
        }
    })
    const str1 = city.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
    qs('#city').innerHTML = '<option value="">请选择城市</option>' + str1
    qs('#city').value = '01'
    const { data: { data: area } } = await axios.get('/city/area', {
        params: {
            provinceCode: '34',
            cityCode: '01'
        }
    })
    const str2 = area.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
    qs('#county').innerHTML = '<option value="">请选择区县</option>' + str2
    qs('#county').value = '24'
    // qs('#province').addEventListener('click', function () {
    //     if (this.value) {
    //         console.log(this.value);
    //         axios.get(`/city/city?provinceCode=${this.value}`).then(({ data }) => console.log(data))
    //     }
    // })
}
fn()

qs('#province').addEventListener('change', async function () {
    const { data: { data: city } } = await axios.get('/city/city', {
        params: {
            provinceCode: `${this.value}`
        }
    })
    const str1 = city.map(item => `<option value="${item.city}">${item.name}</option>`).join('')
    qs('#city').innerHTML = '<option value="">请选择城市</option>' + str1
    qs('#county').innerHTML = '<option value="">请选择区县</option>'
})
qs('#city').addEventListener('change', async function () {
    const { data: { data: area } } = await axios.get('/city/area', {
        params: {
            provinceCode: `${qs('#province').value}`,
            cityCode: `${this.value}`
        }
    })
    const str2 = area.map(item => `<option value="${item.area}">${item.name}</option>`).join('')
    qs('#county').innerHTML = '<option value="">请选择区县</option>' + str2
})
